<template>
	<view class="height-screen bgColr">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">{{$t('group.userInfo')}}</block>
		</cu-custom>
		<view class="flex flex-direction">
			<view class="margin-ht flex align-center" style="margin-top: 20rpx;" id="userInfo">
				<image :src="helper.handleImage(userInfo.avatar)" style="width: 100rpx;height: 100rpx;"
					class="round flex-shrink" />
				<view class="flex flex-direction flex-sub margin-left">
					<view class="flex justify-between align-center">
						<text class="text-lg font-bold text-black">{{userInfo.nickname}}</text>
						<view class="radius-sm setButton padding-lr" @tap.stop="attentionAdd"
							v-if="userInfo.guanzhu_status==0" style="height: 48rpx;background: #06C168;">
							<text class="text-sm text-white">{{$t('group.follow')}}</text>
						</view>
						<view class="radius-sm setButton padding-lr" @tap.stop="attentionDel" v-else
							style="height: 48rpx;background: #06C168;">
							<text class="text-sm text-white">{{$t('group.cancelfollow')}}</text>
						</view>
					</view>
					<view class="flex margin-top-xs">
						<text class="text-xl text-black font-400">{{userInfo.guanzhu_num}}<text
								class="text-gray text-sm margin-left-xs">{{$t('group.follow')}}</text></text>
						<text class="text-xl text-black font-400 margin-left-xl">{{userInfo.fans_num}}<text
								class="text-gray text-sm margin-left-xs">{{$t('group.fans')}}</text></text>
					</view>
				</view>
			</view>
			<view :style="{minHeight:saleHeight+'px'}" class="bg-white flex flex-direction"
				style="border-radius: 30rpx 30rpx 0 0;margin-top: 30rpx;">
				<view class="bg-white radius-xs padding" v-for="(item,index) in dataList" :key="index"
					style="border-bottom: 10rpx solid #f1f1ff;"
					@tap.stop="helper.routerNav('/pages/group/groupDetail',{id:item.id})">
					<view class="padding-bottom flex align-center u-border-bottom">
						<image :src="helper.handleImage(item.avatar)" class="flex-shrink round"
							style="width: 79rpx;height: 79rpx;" />
						<view class="margin-left flex flex-direction flex-sub">
							<text class="text-df font-bold text-black margin-bottom-xs">{{item.nickname}}</text>
							<image v-if="item.gender == 0" src="@/static/img/sexType.png"
								style="width: 35rpx;height: 35rpx;" />
							<div v-else
								style="width: 30rpx;height: 30rpx;border-radius: 36rpx;background-color: #CBE3ED;text-align: center;line-height: 35rpx;">
								<u-icon name="man" color="#2979ff" size="15"></u-icon>
							</div>
						</view>
					</view>
					<view class="grid gap-sm padding-top">
						<text class="text-lg font-bold text-black">{{item.title}}</text>
						<text class="text-df font-400 text-black">{{item.content}}</text>
						<!-- 	<view class="grid grid-col-5 gap-sm" v-if="item.images.length">
							<image :src="helper.handleImage(imgItem)" style="height: 120rpx;width: 100%;"
								v-for="(imgItem,imgIndex) in item.images" :key="imgIndex" />
						</view>
						<view @tap.stop="handleClick">
							<video style="width: 100%;" :src="helper.handleImage(item.video_files)" show-mute-btn
								v-if="item.video_files" :id="'video' + index" @play="videoPlay($event,index)" />
						</view> -->

						<view class="" v-if="item.images.length" style="width:100%;display: flex;flex-wrap: wrap;">

							<view class="" v-for="(imgItem,imgIndex) in item.images" :key="imgIndex"
								style="height: 215rpx;width:33.33%;border-radius: 20rpx;position: relative;">
								<image :src="helper.handleImage(imgItem)" mode="aspectFill"
									style="height: 215rpx;width:100%;" />
								<view v-if="imgIndex==8" class="zzContent">
									<u-icon name="more-dot-fill" color="#ffffff" size="100"></u-icon>
								</view>
							</view>

							<view v-if="item.images.length<9" style="width:33.33%;height: 215rpx;position: relative;">
								<!-- <DomVideoPlayer v-if="item.video_files" :src="helper.handleImage(item.video_files)"
									ref="domVideoPlayer" autoplay loop controls muted :autoplay="true" /> -->
								<hello v-if="item.video_files" :src="helper.handleImage(item.video_files)"
									class="video"></hello>
								<view v-if="item.video_files"
									@tap.stop="helper.routerNav('/pages/group/groupDetail',{id:item.id})"
									class="zzContent" style="background-color: transparent;">
								</view>
							</view>

						</view>


						<view class="flex justify-end">
							<view class="flex align-center">
								<image src="@/static/img/good.png" style="width: 28rpx;height: 29rpx;"
									v-if="item.praise_status==0" @tap.stop="handleLike(item.id,index,0)" />
								<image src="@/static/img/goodActive.png" style="width: 28rpx;height: 29rpx;" v-else
									@tap.stop="handleLike(item.id,index,1)" />
								<text class="text-df font-400 text-black margin-left-xs">{{$t('group.like')}}</text>
							</view>
							<view class="flex align-center margin-left-lg" @tap.stop="handleComment(item.id)">
								<image src="@/static/img/replay.png" style="width: 34rpx;height: 30rpx;" />
								<text class="text-df font-400 text-black margin-left-xs">{{$t('group.comment')}}</text>
							</view>
						</view>
					</view>
				</view>
				<section class="empty" v-if="!dataList.length">
					<u-empty mode="list" :text="$t('list.empty')" />
				</section>
			</view>
		</view>
		<submitComment ref="submitComment" @submitComment="submitComment" />
	</view>
</template>

<script>
	import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer';
	import submitComment from '@/components/submitComment.vue'
	import {
		bbsUserInfo,
		bbsList,
		praise_add,
		praise_del,
		commentAdd,
		attention_add,
		attention_del
	} from '@/apis'
	export default {
		components: {
			submitComment,
			DomVideoPlayer
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				saleHeight: '',
				dataList: [],
				page: 1,
				user_id: null,
				userInfo: {},
				commentArticleId: ''
			}
		},
		mounted() {
			this.computedHeight()
		},
		onLoad(options) {
			this.user_id = options.user_id
		},
		onShow() {
			this.page = 1
			this.dataList = []
			this.bbsUserInfo()
			this.bbsList()
		},
		onReachBottom() {
			this.page++
			this.bbsList()
		},
		methods: {
			handleClick() {},
			videoPlay(event, index) {
				let video = uni.createVideoContext("video" + index, this)
				video.play();
				for (var i = 0; i < this.dataList.length; i++) {
					if (i != index) {
						let video2 = uni.createVideoContext("video" + i, this);
						video2.pause();
					}
				}
			},
			async attentionAdd() {
				await attention_add({
					attention_user_id: this.user_id
				})
				this.helper.showToast(this.$t('message.success'))
				await this.helper.delay(1000, () => {
					this.bbsUserInfo()
				})
			},
			async attentionDel() {
				await attention_del({
					attention_user_id: this.user_id
				})
				this.helper.showToast(this.$t('message.success'))
				await this.helper.delay(1000, () => {
					this.bbsUserInfo()
				})
			},
			async computedHeight() {
				this.saleHeight = await this.helper.computedHeight(this, '#userInfo', this.CustomBar + 25)
			},
			async bbsUserInfo() {
				const res = await bbsUserInfo({
					user_id: this.user_id
				})
				this.userInfo = res
			},
			async bbsList() {
				const res = await bbsList({
					user_id: this.user_id,
					page: this.page
				})
				res.data.map(item => {
					item.images = item.images.split(',')
				})
				this.dataList = this.dataList.concat(...res.data)
			},
			handleComment(id) {
				this.commentArticleId = id
				this.$refs.submitComment.opencomment()
			},
			async submitComment(event) {
				await commentAdd({
					article_id: this.commentArticleId,
					msg: event
				})
				this.helper.showToast(this.$t('message.success'))
			},
			async handleLike(id, index, isDel) {
				if (isDel == 0) {
					await praise_add({
						article_id: id
					})
				} else {
					await praise_del({
						article_id: id
					})
				}
				this.dataList[index].praise_status = this.dataList[index]
					.praise_status == 0 ? 1 : 0
			},
		}
	}
</script>

<style lang="scss" scoped>
	.zzContent {
		width: 100%;
		height: 215rpx;
		// border-radius: 20rpx;
		background-color: rgba(0, 0, 0, 0.7);
		// z-index: 999;
		position: absolute;
		top: 0;
		left: 0;
	}

	.bgColr {
		background: #E5F6EC;
	}
</style>